<template>
  <div>
    <Header />
    <div class="mainBox">
      <el-aside class="aside"> 广告位招商中... </el-aside>
      <el-main class="main">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div></el-col
          >
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-card class="box-card" :body-style="{ padding: '0px' }">
                <span style="float: left; margin-left: 10px">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  ></el-avatar>
                </span>
                <span style="float: left; line-height: 44px"> 跑腿拿快递</span>
                <span
                  style="float: right; margin-right: 10px; line-height: 44px"
                >
                  <el-tag type="success"> 特单任务&nbsp; </el-tag>
                </span>
                <span
                  style="
                    float: right;
                    line-height: 44px;
                    color: red;
                    margin-right: 10px;
                  "
                  >佣金￥5</span
                >
              </el-card>
            </div></el-col
          >
        </el-row>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </el-main>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  components: { Header },
};
</script>

<style  scoped>
/* mainBox */
.mainBox {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
}
/* aside */
.aside {
  height: 509px;
  line-height: 509px;
  background-color: pink;
  flex: 1 1 25%;
}
/* main */
.main {
  flex: 1 1 75%;
  display: inline-block;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.box-card {
  width: 444px;
}
</style>